<style scoped>
  .title{    text-align: center; padding: 20px;font-size: 16px;}
  .upload-box a{width:8rem;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;}
  .upload-box a p{text-align: center;padding: 20px;}
  .pic-item{overflow:hidden;display:flex;justify-content:center;align-items: center;background-color:#f5f5f5;width:4.5rem;height:3.5rem;border-radius:5px;margin-bottom:10px;background-size:cover;background-position:center;}
  .pic-item i{font-size:48px;}
  .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
</style>
<template>
  <wrap title="拍摄学生证明">
    <div slot="page" class="light-bg">
      <input class="hide" type="file" ref="file" @change="upload" accept="image/*" capture="camera">
      <p class="title">请拍摄您的学籍证明图片</p>
      <div class="flex-wrap upload-box">
        <a href="javascript:;" v-for="p in picture" @click="trigger(p.caaNickName)">
          
          <div class="pic-item" :style="{backgroundImage:'url('+p.caaUrl+')'}">
            <i class="fa fa-camera grey-9" aria-hidden="true" v-if="!p.caaUrl"></i>
          </div>
          <p>{{p.caaName}}</p>
        </a>
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'red-bg':'grey-9-bg','font-16']" @click="submit()">确定</a>
    </div>
  </wrap>
</template>
<script>
  import wrap from '../../components/wrap.vue'
  import '../../assets/plugin/lrz.js'
  export default {
    components: {wrap},
    data () {
      return {
        userId: 0,
        applyId: '',
        orderId: 0,
        nextEnable: false,
        type: '',
        picture: [
          {
            caaNickName: 'accredit3',
            caaUrl: '',
            caaName: '学生证或录取通知书'
          },
          {
            caaNickName: 'accredit4',
            caaUrl: '',
            caaName: '学信网截图或机打学费缴费发票'
          }
        ]
      }
    },
    created () {
      const self = this
      let caaFlag = 2
      self.$api.fill.getAttachment(caaFlag).then(res => {
        if (res.code === 0) {
          let data = res.data
          if (data.length !== 0) {
            data.forEach(function (item) {
              if (item.caaNickname === 'accredit3') {
                self.picture[0].caaUrl = item.caaUrl
              } else if (item.caaNickname === 'accredit4') {
                self.picture[1].caaUrl = item.caaUrl
              }
            }, this)
          }
        }
      })
      self.$watch('picture', () => {
        if (self.picture[0].caaUrl && self.picture[1].caaUrl) {
          self.nextEnable = true
        } else {
          self.nextEnable = false
        }
      }, {deep: true})
    },
    methods: {
      trigger (type) {
        const self = this
        self.type = type
        self.$refs.file.click()
      },
      upload (e) {
        const self = this
        const file = e.target.files[0]
        if (file.length === 0) return
        /* eslint-disable*/
        lrz(file, { width: 1000 }).then(img => {
          let form = new FormData()
          form.append('image', img.file)
          form.append('length', img.fileLen)
          self.$api.fill.upload(form).then( res => {
            self.$Indicator.close()
            if (res.code == 0) {
              self.setUrl(res.data.url)
            } else {
              self.$Toast(res.userMsg)
            }
          })
        })
      },
      setUrl (url) {
        const self = this
        self.picture.forEach(item => {
          if (self.type == item.caaNickName) {
            item.caaUrl = url
          }
        })
      },
      submit () {
        const self = this
        if (!self.nextEnable) {
          return
        }
        self.picture.forEach(item => {
          item.caaFlag = 2
          item.caId = self.orderId
        })
        const data = new FormData()
        data.append('data', JSON.stringify(self.picture))
        data.append('type', 2)
        self.$Indicator.open()
        self.$api.fill.saveAttachment(data).then(res => {
          self.$Indicator.close()
          if (res.code == 0) {
            self.$router.go(-1)
          } else {
            self.$Toast(res.userMsg)
          }
        }).always(function () {
          self.$Indicator.close()
        })
      }
    }
  }
</script>
